<template>
  <div class="lunbo">
    <div class="title">用户实时下单数据</div>
    <div class="fu">
      <div class="tao">
        <ul class="go" ref="fuRef">
          <li v-for="(item, index) in 100" :key="index">
            用户:erfadfgvb{{ item }}刚刚下单了
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      step: 20,
      timerId: null
    }
  },
  beforeDestroy () {
    clearInterval(this.timerId)
  },
  mounted () {
    this.$nextTick(() => {
      this.timerId = setInterval(() => {
        this.step -= 1
        if (this.step < -1000) {
          this.step = 0
        }
        this.$refs.fuRef.style.top = this.step + 'px'
      }, 10)
    })
  }
}
</script>
<style lang="less" scoped>
.lunbo {
  position: relative;
  width: 250px;
  color: #fff;
  height: 100%;
  margin: 10px 0 0 20px;
  // padding-top: 50px;
  overflow: hidden;
  .title {
    height: 40px;
  }
  .fu {
    position: relative;
    width: 250px;
    color: #fff;
    height: 90%;
    /* 使用图像边框就一定要给盒子设置边框 */
    border: 20px solid red;
    border-width: 50px 20px 22px 128px;
    box-sizing: border-box;
    border-image-source: url('../../assets/images/border.png');
    border-image-slice: 50 20 22 128;
    border-image-width: 50px 20px 22px 128px;
    /* 边框图片拉伸 */
    border-image-repeat: stretch;
    padding: 50px 0;
    // overflow: hidden;
  }
  .go {
    position: absolute;
    left: 0px;
    top: 20px;
    height: 100%;
    li {
      list-style: none;
      font-size: 14px;
      color: #fff;
      height: 30px;
      line-height: 30px;
    }
  }
}
.tao {
  position: absolute;
  left: -140px;
  // right: -300px;
  top: -20px;
  bottom: 0px;
  // background-color: #fff;
  height: 100%;
  width: 250px;
  overflow: hidden;
}
</style>
